<template>
	<div class="wrapper">
		<header>
			<p>用户积分</p>
		</header>
		<div class="integration">
			<div class="integration-img">
				<img src="../assets/jifen.jpeg">
			</div>
			<ul class="integration-info">
				<li class="integration-info-total">
					<p>当前总积分：
						<i class="fa fa-gift"></i>
						1125
					</p>
				</li>
				<li class="integration-info-expiration">
					<p>即将到期：
						<i class="fa fa-gift"></i>
						230
					</p>

					<div class="right">  
    					<router-link to="/index">立即使用 &gt;</router-link>  
  					</div> 

				</li>
				<p class="youhui">优惠：每100积分可抵1元</p>
			</ul>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	export default{
		components: {
			Footer
		}
	}
</script>

<style scoped>
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/*header部分*/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097ff;
		color: #fff;

		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .integration {
		width: 100%;
		margin-top: 12vw;
	}

	.wrapper .integration .integration-info {
		width: 100%;
		font-size: 6vw;
	}

	.wrapper .integration .integration-img img {
		width: 100%;
		display: flex;
	}

	.wrapper .integration .integration-info .integration-info-total {
		margin-bottom: 3vw;
		margin-top: 5vw;

		width: 100%;
		height: 30vw;

		color: #644f18;
		background-color: #feedc1;
		border-radius: 20px;

		display: flex;
		align-items: center;
	}

	.wrapper .integration .integration-info .integration-info-expiration {
		margin-bottom: 3vw;

		width: 100%;
		height: 30vw;

		color: #fff;
		background-color: #ff3e3e;
		border-radius: 20px;

		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.wrapper .integration .integration-info .integration-info-expiration .right {
		user-select: none;
		cursor: pointer;
	}

	.wrapper .integration .integration-info .youhui {
		margin-bottom: 3vw;

		width: 100%;
		height: 30vw;

		color: burlywood;
		background-color: rgb(8, 108, 75);
		border-radius: 20px;

		display: flex;
		align-items: center;
	}
</style>
